import React, { useState } from 'react';

const SingleSelect = () => {
    const [selectedOption, setSelectedOption] = useState(null);
    const [dropdownDirection, setDropdownDirection] = useState('down');

    const options = [
        'Option 1',
        'Option 2',
        'Option 3',
        'Option 4',
        'Option 5',
        'Option 6',
        'Option 7',
        'Option 8',
        'Option 9',
        'Option 10'
    ];

    const handleOptionChange = (option) => {
        setSelectedOption(option);
    };

    const handleDropdownDirection = () => {
        const rect = document.querySelector('.select-container').getBoundingClientRect();
        const spaceBelow = window.innerHeight - rect.bottom;
        const spaceAbove = rect.top;
        if (spaceBelow < 200 && spaceAbove > spaceBelow) {
            setDropdownDirection('up');
        } else {
            setDropdownDirection('down');
        }
    };

    return (
        <div className="select-container" onClick={handleDropdownDirection}>
            <h2>Single Select Demo</h2>
            {dropdownDirection === 'down' ? (
                <select value={selectedOption} onChange={(e) => handleOptionChange(e.target.value)}>
                    {options.map((option, index) => (
                        <option key={index} value={option}>{option}</option>
                    ))}
                </select>
            ) : (
                <div className="dropdown-up">
                    {options.map((option, index) => (
                        <div key={index} onClick={() => handleOptionChange(option)}>{option}</div>
                    ))}
                </div>
            )}
            <p>Selected Option: {selectedOption}</p>
        </div>
    );
};

export default SingleSelect;
